<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景点列表</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
    <link rel="stylesheet" href="../styles.css">
</head>
<body class="bg-gray-100 p-4">
    <h2 class="text-xl font-bold mb-4 text-center text-green-600">景点列表</h2>

    <!-- Search Bar -->
    <div class="mb-4">
        <input type="text" placeholder="搜索景点..." class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
    </div>

    <!-- Attraction List -->
    <div class="space-y-3">
        <div class="bg-white p-3 rounded-lg shadow-md flex items-center space-x-3 hover:shadow-lg transition-shadow">
            <img src="https://via.placeholder.com/80x80?text=Att+A" alt="景点A" class="w-16 h-16 rounded object-cover">
            <!-- Replace with real image -->
            <div class="flex-1">
                <h3 class="font-semibold">景点名称 A</h3>
                <p class="text-sm text-gray-600">这里是景点的简短描述...</p>
                <div class="text-xs text-gray-500 mt-1">
                    <i class="fas fa-star text-yellow-400"></i> 4.8 (120评价)
                </div>
            </div>
            <a href="#" class="text-green-500 hover:text-green-700">
                <i class="fas fa-chevron-right"></i>
            </a>
        </div>
        <div class="bg-white p-3 rounded-lg shadow-md flex items-center space-x-3 hover:shadow-lg transition-shadow">
            <img src="https://via.placeholder.com/80x80?text=Att+B" alt="景点B" class="w-16 h-16 rounded object-cover">
            <!-- Replace with real image -->
            <div class="flex-1">
                <h3 class="font-semibold">景点名称 B</h3>
                <p class="text-sm text-gray-600">另一个景点的描述信息...</p>
                 <div class="text-xs text-gray-500 mt-1">
                    <i class="fas fa-star text-yellow-400"></i> 4.5 (95评价)
                </div>
            </div>
             <a href="#" class="text-green-500 hover:text-green-700">
                <i class="fas fa-chevron-right"></i>
            </a>
        </div>
         <div class="bg-white p-3 rounded-lg shadow-md flex items-center space-x-3 hover:shadow-lg transition-shadow">
            <img src="https://via.placeholder.com/80x80?text=Att+C" alt="景点C" class="w-16 h-16 rounded object-cover">
            <!-- Replace with real image -->
            <div class="flex-1">
                <h3 class="font-semibold">景点名称 C</h3>
                <p class="text-sm text-gray-600">这是第三个景点的描述...</p>
                 <div class="text-xs text-gray-500 mt-1">
                    <i class="fas fa-star text-yellow-400"></i> 4.7 (210评价)
                </div>
            </div>
             <a href="#" class="text-green-500 hover:text-green-700">
                <i class="fas fa-chevron-right"></i>
            </a>
        </div>
        <!-- Add more attractions -->
    </div>

</body>
</html>